<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        /* Make the image fully responsive */
        .carousel-inner img {
            text-align: center;
            margin: 0 auto;
            width: 100%;
            height: 280px;
        }
        .card-link{
            color: black;
            font-size: 24px;
            font-weight: bolder;
            font-family: "Arial Black";
        }
        .container{
            margin-top: 10px;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark fixed-top">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">
        <img src="http://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
    </a>
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#demo">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#alt2">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#demo2">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#demo3">Disabled</a>
        </li>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                <img src="http://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:25px;">
                <b th:text=" ${userName} ">
                </b>
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">
                    <img src="http://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:25px;">
                    <b th:text=" ${userName} ">
                    </b>
                </a>
                <a class="dropdown-item" href="#"><b>修改密码</b></a>
                <a class="dropdown-item" href="#" onclick="logout()"><b>退出</b></a>
            </div>
        </li>

    </ul>
    <!-- Navbar text-->
    &nbsp;&nbsp;
      &nbsp;&nbsp;
    <form class="form-inline" action="/action_page.php">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">关键字</span>
            </div>
            <input type="text" class="form-control" placeholder="key">
        </div>
    </form>

    <form class="form-inline" style="position: relative;right: -200px;">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-success" type="button">Search</button>
    </form>

</nav>
<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
            <div class="carousel-caption">
                <h3>第一张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
            <div class="carousel-caption">
                <h3>第二张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第三张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

<div class="container">
    <h2>简介</h2>
    <a href="#demo1" class="btn btn-primary" data-toggle="collapse">我的简介</a>
    <div id="demo1" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>
<div class="container">
    <h2>手风琴实例</h2>
    <p><strong>注意:</strong> 使用 <strong>data-parent</strong> 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。</p>
    <div id="accordion">
        <div class="card">
            <div class="card-header">
                <a class="card-link" data-toggle="collapse" href="#collapseOne">
                    选项一
                </a>
            </div>
            <div id="collapseOne" class="collapse " data-parent="#accordion">
                <div class="card-body">
                    <div class="container">
                        <h2>简单的卡片</h2>
                        <div class="card">
                            <div class="card-body">简单的卡片</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                    选项二
                </a>
            </div>
            <div id="collapseTwo" class="collapse show" data-parent="#accordion">
                <div class="card-body">
                    #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                    <div class="container">
                        <h2>多种颜色卡片</h2>
                        <div class="card">
                            <div class="card-body">Basic card</div>
                        </div>
                        <br>
                        <div class="card bg-primary text-white">
                            <div class="card-body">Primary card</div>
                        </div>
                        <br>
                        <div class="card bg-success text-white">
                            <div class="card-body">Success card</div>
                        </div>
                        <br>
                        <div class="card bg-info text-white">
                            <div class="card-body">Info card</div>
                        </div>
                        <br>
                        <div class="card bg-warning text-white">
                            <div class="card-body">Warning card</div>
                        </div>
                        <br>
                        <div class="card bg-danger text-white">
                            <div class="card-body">Danger card</div>
                        </div>
                        <br>
                        <div class="card bg-secondary text-white">
                            <div class="card-body">Secondary card</div>
                        </div>
                        <br>
                        <div class="card bg-dark text-white">
                            <div class="card-body">Dark card</div>
                        </div>
                        <br>
                        <div class="card bg-light text-dark">
                            <div class="card-body">Light card</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                    选项三
                </a>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
                    <div class="container">
                        <h2>卡片头部和底部</h2>
                        <div class="card">
                            <div class="card-header">头部</div>
                            <div class="card-body">内容</div>
                            <div class="card-footer">底部</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <h2>模态框实例</h2>
    <!-- 按钮：用于打开模态框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        打开模态框
    </button>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">模态框头部</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    模态框内容..
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>

</div>
<div class="container" id="alt2">
    <h2>简单的折叠2</h2>
    <a href="#demo2" class="btn btn-primary" data-toggle="collapse">简单的折叠</a>
    <div id="demo2" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom  justify-content-center">

    <span class="navbar-text" style="text-align: center;">
     &copy;2022-5-16 Navbar text
        <p>宇宙牌香烟</p>
  </span>
</nav>
</body>
</html>
<script>
    function logout() {
        $.ajax({
            url:"/admin/logout",
            success:function (res) {
                window.location.href="/admin/toLogin"
            }
        })
    }
</script>